import { Link } from "react-router-dom";
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  DatePicker,
  Select,
  Table,
  Space,
  Tag,
  ConfigProvider,
} from "antd";
import zhCN from "antd/locale/zh_CN";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import img404 from "@/assets/error.png";
import { useEffect, useState } from "react";
import { getChannelsAPI } from "@/apis/common";
import { getArticleAPI } from "@/apis/article";

const { Option } = Select;
const { RangePicker } = DatePicker;
const Article = () => {
  //使用axios获取频道列表数据
  const [channels, setChannels] = useState([]);
  useEffect(() => {
    async function fetchChannels() {
      const res = await getChannelsAPI();
      setChannels(res.data.channels);
    }
    fetchChannels();
  }, []);
  //准备表格数据
  const data = [
    {
      id: "8218",
      comment_count: 0,
      cover: {
        images: [],
      },
      like_count: 0,
      pubdate: "2019-03-11 09:00:00",
      read_count: 2,
      status: 2,
      title: "wkwebview离线化加载h5资源解决方案",
    },
  ];
  //准备表格结构
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      width: 120,
      render: (cover) => {
        return (
          <img src={cover.images[0] || img404} width={80} height={60} alt="" />
        );
      },
    },
    {
      title: "标题",
      dataIndex: "title",
      width: 220,
    },
    {
      title: "状态",
      dataIndex: "status",
      render: (data) => (
        <Tag color={data == 1 ? "green" : "red"}>
          {data == 1 ? "审核通过" : "待审核"}
        </Tag>
      ),
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
    },
    {
      title: "评论数",
      dataIndex: "comment_count",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
    },
    {
      title: "操作",
      render: (data) => (
        <Space size={"middle"}>
          <Button type="primary" shape="circle" icon={<EditOutlined />} />
          <Button type="danger" shape="circle" icon={<DeleteOutlined />} />
        </Space>
      ),
    },
  ];
  //使用axios获取表格数据
  const [article, setArticle] = useState({ list: [], count: 0 });
  const [params, setParams] = useState({
    page: 1,
    per_page: 4,
    begin_pubdate: null,
    end_pubdate: null,
    status: null,
    channel_id: null,
  });
  useEffect(() => {
    async function fetchArticle() {
      const res = await getArticleAPI({ params });
      const { results, total_count } = res.data;
      setArticle({
        list: results,
        count: total_count,
      });
    }
    fetchArticle();
    console.log(article);
  }, [params]);
  return (
    <div>
      <Card>
        <Breadcrumb
          items={[{ title: <Link to="/">首页</Link> }, { title: "文章管理" }]}
          style={{ paddingBottom: 10, borderBottom: "1px solid #ccc" }}
        />
        <Form>
          <Form.Item label="状态">
            <Radio.Group value={3}>
              <Radio value={1}>全部</Radio>
              <Radio value={2}>草稿</Radio>
              <Radio value={3}>待审核</Radio>
              <Radio value={4}>审核通过</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道" name={"channel_id"}>
            <Select placeholder="请选择文章频道" style={{ width: 220 }}>
              {channels.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item label="日期" name="data">
            <RangePicker locale={zhCN.DatePicker} />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 3 }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ width: 300, height: 50 }}
            >
              查询
            </Button>
          </Form.Item>
        </Form>
        <Table dataSource={article.list} columns={columns} />;
      </Card>
    </div>
  );
};
export default Article;
